<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<link rel="stylesheet" href="https://www.xingzhenghang.tk/ui/css/mdui.min.css" />
	<script async="" src="https://www.xingzhenghang.tk/js/mdui.js"></script>
	<meta charset="utf-8"/>
	<title>BMI 计算器</title>
</head>
<body class="mdui-drawer-body mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink">
<content="yes" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width" />
<div>
<div class="mdui-container">
<header class="mdui-appbar mdui-appbar-fixed">
<div class="mdui-toolbar mdui-color-theme">
<span class="mdui-btn  mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
<span class="mdui-typo-title">BMI 计算器</span>
</div>
</header>
</div>
<div class="mdui-container doc-container">
<form>
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">身高</label>
  <input class="mdui-textfield-input" type="number" id="height" pattern="/^\d+(\.{0,2}\d+){0,2}$/" required/>
  <div class="mdui-textfield-error">请输入身高（不带单位）</div>
  <div class="mdui-textfield-helper">身高 （单位：厘米）</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">体重</label>
  <input class="mdui-textfield-input" type="number" id="weight" pattern="/^\d+(\.{0,2}\d+){0,2}$/" required/>
  <div class="mdui-textfield-error">请输入体重（不带单位）</div>
  <div class="mdui-textfield-helper">体重 （单位：千克）</div>
</div>
    <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme">计算</button>
    <div id="results">你的 BMI 是：</div>
    <div id="weight-guide">
    <h3>BMI 参考值</h3>
<div class="mdui-table-fluid">
  <table class="mdui-table">
    <thead>
      <tr>
        <th>分类</th>
        <th>BMI</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>过轻</td>
        <td><18.5</td>
      </tr>
      <tr>
        <td>正常</td>
        <td>18.5-23.9</td>
      </tr>
      <tr>
        <td>超重</td>
        <td>24-27.9</td>
      </tr>
      <tr>
        <td>肥胖</td>
        <td>≥28</td>
      </tr>
    </tbody>
  </table>
</div>
    </div>
    </form>
    </div>
</body>
<script src="script.js"></script>
</html>
